<template>
   
    <div id="supplier">
        <h3>供货商</h3>
        <div class="head">
        <div class="left">
          <router-link to="/Supplier/SupplierAdd"><i class="el-icon-plus"></i>添加</router-link>
        </div>
        <div class="right">
          <el-input v-model="input_name" placeholder="请输入供应商"></el-input>
          <el-input v-model="input_tel" placeholder="请输入负责人"></el-input>
          <el-input v-model="input_tel" placeholder="请输入联系方式"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
      </div>
        <!-- 只要在项目中安装和配置了 vue-router ，就可以使用 router-view 这个组件了 -->
        <!-- 它的作用很单纯：占位符 -->
       
        <router-view></router-view>
        <div class="content">
        <el-table :data="tableData" style="width: 100%; background-color: black;">
            <el-table-column
                prop="logo"
                label="LOGO"
                width="180">
            </el-table-column>
            <el-table-column
                prop="supplier"
                label="供货商"
                width="180">
            </el-table-column>
            <el-table-column
                prop="director"
                label="负责人">
            </el-table-column>
            
            <el-table-column
                prop="tel"
                label="联系方式">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
                
            </el-table-column>
            <el-table-column
                prop="others"
                label="备注">
            </el-table-column>
            <el-table-column width="200px" label="操作">
              <template slot-scope="scope">
                <router-link to="/Supplier/SupplierEdit"><el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button></router-link>
                  <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <div class="bottom">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
      </div>    
    </div>
  
  </template>
  
  <script>
   export default {
      data() {
        return {
            
          input_name:'',
          input_tel:'',
          tableData: [{
            id:'1',
            logo: '1',
            supplier: 'xx',
            director: '李四',
            tel: '111111',
            address: '河北省石家庄市',
            others: '无',
            op: '修改'
          }, {
            id:'2',
            logo: '1',
            supplier: 'xx',
            director: '李四',
            tel: '111111',
            address: '河北省石家庄市',
            others: '无',
            op: '修改'
          }, {
            id:'3',
            logo: '1',
            supplier: 'xx',
            director: '李四',
            tel: '111111',
            address: '河北省石家庄市',
            others: '无',
            op: '修改'
          }, {
            id:'4',
            logo: '1',
            supplier: 'xx',
            director: '李四',
            tel: '111111',
            address: '河北省石家庄市',
            others: '无',
            op: '修改'
          }, {
            id:'5',
            logo: '1',
            supplier: 'xx',
            director: '李四',
            tel: '111111',
            address: '河北省石家庄市',
            others: '无',
            op: '修改'
          }, {
            id:'6',
            logo: '1',
            supplier: 'xx',
            director: '李四',
            tel: '111111',
            address: '河北省石家庄市',
            others: '无',
            op: '修改'
          }, {
            id:'7',
            logo: '1',
            supplier: 'xx',
            director: '李四',
            tel: '111111',
            address: '河北省石家庄市',
            others: '无',
            op: '修改'
          }, {
            id:'8',
            logo: '1',
            supplier: 'xx',
            director: '李四',
            tel: '111111',
            address: '河北省石家庄市',
            others: '无',
            op: '修改'
          }]
        }
      },
      methods: {
        search() {
          if(this.input_name === '' || this.input_tel === '') {
            alert("内容不能为空")
            return;
          }
          // console.log(this.input_name + this.input_tel)
          this.$confirm('你确定要执行此操作吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.$message({
              type: 'success',
              message: '搜索成功!'
            });
            this.tableData = this.tableData.filter(item => item.name === this.input_name && item.tel === this.input_tel);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消搜索'
            });
          });
        },
       
        // 修改方法
        handleEdit(index, row) {
          this.$router.push("/UserManagement/Manager/ManagerModify")
          console.log(index, row);
        },
         // 删除方法
        handleDelete(id) {
          this.$confirm('你确定要删除此数据吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.tableData = this.tableData.filter(item => item.id != id);
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
        
      }
    }
  </script>

  
<style lang="less">
  #supplier {
    height: 100%;
    .content {      
      margin-left: 30px;
      margin-right: 30px;
    }
    .head {
      display: flex;
      justify-content: space-between;
      margin: 30px;
      .left {
        width: 90px;
        height: 40px;
        background-color: #0f6bb1;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        a {
          margin: auto;
          color: white;
        }
      }
      .right {
        .el-input {
          width: 160px; 
          margin-right: 30px; 
          border-radius: 50px;
        }
      }
    }
  }

</style>